<template>
  <view class="evaluate">
    <NavbarRight
      leftIconColor="#333333"
      bgColor="transparent"
      isBack
      :left="{ imageUrl: leftImageUrl, width: '48rpx' }"
    />
    <view class="background"> </view>
    <view class="content">
      <view class="info-view">
        <view class="head">
          <view class="hot-info">
            <view class="hot-title ellipsis-3">
              {{ info.title }}
            </view>
            <view class="author">
              <!-- <text>作者：</text> -->
              <text>{{ info.subtitle }}</text>
            </view>
            <view class="author">
              <text>{{ parseTime(info.dateline) }}</text>
            </view>
          </view>
        </view>
        <view class="preview-content">
          <!-- <view class="preview-video" v-if="info.type === 'video'">
            <image :src="info.cover" class="preview-video-cover"></image>
            <view class="preview-video-tag">
              <image :src="videoIcon" class="preview-video-icon"></image>
              <text class="duration">{{ duration }}</text>
            </view>
          </view>
          <view class="preview-audio" v-else-if="info.type === 'audio'">
            <text class="duration">{{ duration }}</text>
            <image :src="audioIcon" class="preview-audio-icon"></image>
          </view> -->
          <view class="preview-audio">
            <image
              :src="videoIcon"
              class="preview-icon"
              v-if="reciteInfo.type === 'video'"
            ></image>
            <image :src="audioIcon" class="preview-icon" v-else></image>
            <text class="duration">{{
              reciteInfo.type === "video" ? "视频跟练" : "音频跟练"
            }}</text>
          </view>
        </view>
      </view>
      <view class="evaluate-view">
        <view class="evaluate-title">
          <image :src="evaluateIcon" mode="" class="evaluate-icon"></image>
          <text>点评</text>
        </view>
        <view class="article-body">
          <rich-text :nodes="reciteInfo.content"></rich-text>
        </view>
      </view>
    </view>
    <view class="fixed">
      <image
        :src="fixedIcon"
        mode=""
        class="fixed-icon"
        @click="toChat"
      ></image>
    </view>
    <BottomButtons
      cancelText="重新录制"
      confirmText="完成今日练习"
      :leftIcon="leftIcon"
      :rightIcon="rightIcon"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      v-if="reciteInfo.status === '0'"
    ></BottomButtons>
  </view>
</template>

<script setup>
import NavbarRight from "@/components/navbar-right/index.vue";
import BottomButtons from "@/components/bottom-buttons/index.vue";
import { onLoad, onUnload } from "@dcloudio/uni-app";
import { parseDuration, parseTime } from "@/utils/common.js";

import { reactive, computed, ref } from "vue";
import { getReciteInfo, saveStatus } from "@/api/records";
import { showToast } from "@/utils/common";

const leftImageUrl = ref("/static/images/login/loginfanhui@3x.png");
// const videoIcon = ref("/static/images/article/shipin@3x.png");
// const audioIcon = ref("/static/images/article/yuyintiao@3x.png");
const videoIcon = ref("/static/images/article/shipin@3x.png");
const audioIcon = ref("/static/images/article/luyin-2@3x.png");
const leftIcon = ref("/static/images/article/chongxinluzhi-default@3x.png");
const rightIcon = ref("/static/images/article/wancheng-white@3x.png");
const evaluateIcon = ref("/static/images/article/Group-43@3x.png");
const fixedIcon = ref("/static/images/article/qingxufenxi@3x.png");
const id = ref("");
const info = ref({});
const reciteInfo = ref({});
const fileUrl = ref("");

onLoad((options) => {
  if (options && options.id) {
    id.value = options.id;
    getDetail();
  }
});
const getDetail = async () => {
  try {
    let res = await getReciteInfo({
      id: id.value,
    });
    res.data.type = res.data.video ? "video" : "audio";
    info.value = res.data.article_info;
    reciteInfo.value = res.data;
    fileUrl.value = res.data.type === "video" ? res.data.video : res.data.audio;
  } catch (e) {
    console.log(e);
    //TODO handle the exception
  }
};
const handleCancel = () => {
  uni.$emit("clear-video");
  let url =
    reciteInfo.value.type === "video"
      ? "/pages/article/camera/camera"
      : "/pages/article/recorder/recorder";
  uni.$u.route({
    url,
    params: {
      id: info.value.id,
      editReciteId:id.value
    },
  });
};
const handleConfirm = async () => {
  try {
    let res = await saveStatus({ reciteId: id.value, status: 1 });
    showToast("练习完成");
    setTimeout(() => {
      if (getCurrentPages().length <= 1) {
        uni.switchTab({
          url: "/pages/index/index",
        });
      } else {
        uni.navigateBack();
      }
    }, 1200);
  } catch (error) {
    showToast("保存失败");
  }
};
const toChat = () => {
  uni.$u.route({
    url: "/pages/article/chat/chat",
    params: {
      id: reciteInfo.value.id,
    },
  });
};
</script>

<style lang="scss" scoped>
.evaluate {
  position: relative;
  height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;

  .background {
    width: 100%;
    height: 780rpx;
    top: 0;
    left: 0;
    position: absolute;
    background: linear-gradient(180deg, #90e4ed 0%, #ffffff 100%);
  }

  .content {
    height: 100%;
    overflow: auto;
    position: relative;
    z-index: 10;
    padding: 24rpx 32rpx;
    padding-bottom: 128rpx;

    .info-view {
      background: #ffffff;
      border-radius: 30rpx;
      padding: 40rpx 30rpx;
    }

    .preview-content {
      .preview-video {
        position: relative;
        width: 388rpx;
        height: 218rpx;

        .preview-video-cover {
          border-radius: 20rpx;
          border: 2rpx solid #1a1a1a;
          overflow: hidden;
          width: 388rpx;
          height: 218rpx;
        }

        .preview-video-tag {
          position: absolute;
          z-index: 1;
          right: 10rpx;
          bottom: 10rpx;
          height: 48rpx;
          border-radius: 24rpx;
          padding: 22rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          color: #ffffff;
          line-height: 28rpx;
          background: rgba(0, 0, 0, 0.5);
        }

        .preview-video-icon {
          width: 28rpx;
          height: 28rpx;
          margin-right: 8rpx;
        }

        .duration {
        }
      }

      .preview-audio {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        color: #5ACEE0;
        width: 208rpx;
        height: 52rpx;
        background: #FFFFFF;
        border: 2rpx solid #5ACEE0;
        border-radius: 16rpx;

        .duration {
        }
        .preview-icon {
          width: 36rpx;
          height: 36rpx;
          margin-right: 12rpx;
        }

        .preview-audio-icon {
          width: 88rpx;
          height: 48rpx;
          margin-left: 20rpx;
        }
      }
    }

    .head {
      margin-bottom: 30rpx;

      .records {
        position: relative;

        .cover-view {
          width: 100%;
          height: 686rpx;
          border-radius: 30rpx;
          position: relative;
          overflow: hidden;
        }
      }

      .hot-info {
        .hot-title {
          font-size: 44rpx;
          font-weight: bold;
          color: #1a1a1a;
          line-height: 58rpx;
        }

        .author {
          font-size: 28rpx;
          color: #939999;
          line-height: 28rpx;
          margin-top: 20rpx;
        }
      }
    }

    .evaluate-view {
      margin-top: 80rpx;

      .evaluate-title {
        font-size: 36rpx;
        line-height: 36rpx;
        display: flex;
        align-items: center;
        margin-bottom: 30rpx;

        .evaluate-icon {
          width: 68rpx;
          height: 68rpx;
          margin-right: 20rpx;
        }
      }
    }

    .article-body {
      font-size: 28rpx;
      line-height: 44rpx;
      // height: 176rpx;
      // overflow-y: auto;
    }

    .audio-player {
      padding: 60rpx 0;
    }
  }

  .fixed {
    display: inline-block;
    width: 168rpx;
    height: 168rpx;
    position: fixed;
    bottom: 168rpx;
    right: 32rpx;
    z-index: 99;

    .fixed-icon {
      width: 168rpx;
      height: 168rpx;
    }
  }
}
</style>
